<template>
    <div class="panel">
        <div class="header">
            <h3>仪表盘</h3>
        </div>
        <div class="chart" >
            <div id="mychart"></div>
            <div id="mychart2"></div>
        </div>
        <div class="column" id="column">

        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    mounted(){
        this.initCharst()
        this.initCharst2()
        this.column()
    },
    methods:{
        //饼图
        initCharst(){
            //初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('mychart'))
            //绘制图表
            myChart.setOption({
                title: {
                    text: '运营方式',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '运营方式',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1048, name: '明星代言'},
                            {value: 735, name: '发宣传单'},
                            {value: 580, name: '发布会'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        },
        //
        initCharst2(){
            //初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('mychart2'))
            //绘制图表
            myChart.setOption({
                title: {
                    text: '职位',
                    left: 'center'
                },
                legend: {
                    
                    top: 'bottom'
                },
                series: [
                    {
                        name: '面积模式',
                        type: 'pie',
                        radius: [20, 80],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 6
                        },
                        data: [
                            {value: 40, name: '销售'},
                            {value: 38, name: '职发'},
                            {value: 32, name: '市场'},
                            {value: 30, name: '技术'},
                            {value: 28, name: '财务'},
                            {value: 26, name: '售后'},
                            // {value: 22, name: 'rose 7'},
                            // {value: 18, name: 'rose 8'}
                        ]
                    }
                ]
            })
        },
        //柱状图
        column(){
            var coLumn = this.$echarts.init(document.getElementById('column'))
            coLumn.setOption({
                title: {
                    text: '2020年每月销量额',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '六月', '七月', '八月','九月','十月','十一月','十二月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 160, 150, 80, 70, 110, 130,80,95,100,120],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: '#cbf1f5'
                    }
                }]
            })
        }

    }
}
</script>

<style lang="less">
.chart{
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-top: 20px;
    #mychart{
        display: inline-block;
        width: 50%;
        height: 300px;
        // overflow: hidden;
    }
    #mychart2{
        display: inline-block;
        width: 50%;
        height: 300px;
    }
}
.column{
    width: 100%;
    height: 600px;
    overflow: hidden;
}
</style>